  // 获取元素
  var box = document.querySelector('.box')
  var btn = document.querySelectorAll('.box>a')
  var lis = document.querySelectorAll(' #TAB>li')
  var TAB = document.querySelector('#TAB')
  // 绑定事件 选项卡
  for (let i = 0; i < btn.length; i++) {
      // 定义自定义属性 (需要获取才能使用) 
      btn[i].index = i
      // 绑定事件
      btn[i].onmousemove = function () {
          // 获取自定义属性  
          var index = this.index
          // 排他思想
          for (let j = 0; j < btn.length; j++) {
              //  btn[i].style.backgroundColor = ''
              // 可以把上面的换成下面的
              btn[j].className = ''
              lis[j].className = ''
          }
          TAB.style.display = 'block'
          lis[index].className = 'active'
      }
      // 鼠标可以停留在子菜单上面
      box.onmouseleave = function () {
        TAB.style.display = 'none'
      }
  }

  var mySwiper = new Swiper('.swiper', {
      effect: 'fade',// 淡入
      keyboard: true,// 键盘和可以操作
      loop: true, // 循环模式选项
      // 如果需要分页器
      pagination: {
          el: '.swiper-pagination',
      },

      // 如果需要前进后退按钮
      navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
      },
  })        